<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>话题</title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css"/>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				border: 0px;
				font-family: "黑体";
				background-color: white;
			}
			
			.containerlst{
				margin: 0px 10px 0px 10px;
			}
			
			.topic{
				margin-top: 10px;
			}
			
			.topic-title{
				color: #515151;
				font-size: 16px;
				display: block;
			}
			
			.topic-description{
				color: #646464;
				text-indent: 2em;
				font-size: 14px;
				margin-top: 6px;
				display: block;
			}
			
			.topic-time{
				display: block;
				float: right;
				color: #a1a1a1;
				font-size: 13px;
				margin-top: 2px;
				margin-right: 8px;
			}
			
			.topic-img{
				display: flex;
				padding-top: 6px;
				width: 100%;
			}
			
			.topic-img span{
				display: block;
				width: 33%;
			}
			
			.timg-left{
				text-align: left;
			}
			
			.timg-center{
				text-align: center;
			}
			
			.timg-right{
				text-align: right;
			}
			
			.timg{
				width: 90%;
			}
			
			.topic-bottom{
				display: block;
				padding-top: 6px;
			}
			
			.topic-auther{
				display: block;
				float: left;
				color: #a1a1a1;
				font-size: 13px;
			}
			
			.topic-oper{
				display: flex;
				float: right;
				margin-right: 10px;
			}
			
			.operimg{
				margin-left: 12px;
			}
			
			.hideoper{
				border: 2px solid #00A8C6;
				text-align: center;
				margin-top: -4px;
			}
			
			.oper{
				width: 137px;
				height: 22px;
				display: flex;
				color: #92adb6;
				font-size: 10px;
				padding-top: 2px;
			}
			
			.oper-left{
				display: block;
				width: 30%;
			}
			
			.oper-center{
				display: block;
				width: 35%;
			}
			
			.oper-bottom{
				display: block;
				width: 35%;
			}
			
			.dvline{
				display: block;
				padding-top: 28px;
			}
			
			.line{
				background-color: #dedede;
				width: 100%;
				height: 1px;
			}
		
		</style>
	</head>
	<body style="background-color: white;">
		<script id="topicTem" type="text/template">
			<% if(topiclst != null && topiclst != ""){ %>
				<% for(var i = 0; i < 4; i ++) {%>
					<div id="topic" class="topic">
						<a href="topicinfo.html?topicid=<%= i %>"><span class="topic-title">让孩子赢在起跑线学区房热度不减</span>
						<span class="topic-description">
							从某种意义上说衍生品，学区房是房地产市场的衍生品，是现行教育体制下的独特现象。为了孩子能赢在起跑线上，能进好的学校，接收更好的教育，很多家长不惜重金买下重点办公小学的学区房。
						</span>
						<span class="topic-time">发布时间:2012-12-12</span>
						<span id="topicimg" class="topic-img">
							<% if(1 == 1){ %>
								<% for(var ii = 0; ii < 3; ii ++) { %>
									<span><img src="../../img/1-13092PQ63K52.jpg" class="timg" /></span>
								<% } %>
							<% } %>
						</span></a>
						<span class="topic-bottom">
							<span class="topic-auther">发帖人:苏小白</span>
							<span class="topic-oper">
								<div id="oper" class="hideoper" style="display: none;">
									<div class="oper">
										<span class="oper-left">
											<img src="img/operzan02.png" style="width: 13px;" />赞
										</span>
										<span class="oper-center">
											<img src="img/opersc_03.png" style="width: 14px;" />收藏
										</span>
										<span class="oper-bottom">
											<img src="img/operpl_03.png" style="width: 13px;" />评论
										</span>
									</div>
								</div>
								<span class="operimg"><img src="img/oper.png" style="width: 18px;"></span>
							</span>
						</span>
					</div>
					<div class="dvline">
						<hr class="line" />
					</div>
				<% } %>
			<% } %>
		</script>
		<div id="container">
			<div id="dropcontainer">
				<div id="containerlst" class="containerlst">
					<!--<div id="topic" class="topic">
						<span class="topic-title">让孩子赢在起跑线学区房热度不减</span>
						<span class="topic-description">
							从某种意义上说衍生品，学区房是房地产市场的衍生品，是现行教育体制下的独特现象。为了孩子能赢在起跑线上，能进好的学校，接收更好的教育，很多家长不惜重金买下重点办公小学的学区房。
						</span>
						<span class="topic-time">发布时间:2012-12-12</span>
						<span id="topicimg" class="topic-img">
							<span class="timg-left"><img src="../../img/1-13092PQ63K52.jpg" class="timg" /></span>
							<span class="timg-center"><img src="../../img/1-13092PQ63K52.jpg" class="timg" /></span>
							<span class="timg-right"><img src="../../img/1-13092PQ63K52.jpg" class="timg" /></span>
						</span>
						<span class="topic-bottom">
							<span class="topic-auther">发帖人:苏小白</span>
							<span class="topic-oper">
								<div id="oper" class="hideoper" style="display: none;">
									<div class="oper">
										<span class="oper-left">
											<img src="img/operzan02.png" style="width: 13px;" />赞
										</span>
										<span class="oper-center">
											<img src="img/opersc_03.png" style="width: 14px;" />收藏
										</span>
										<span class="oper-bottom">
											<img src="img/operpl_03.png" style="width: 13px;" />评论
										</span>
									</div>
								</div>
								<span class="operimg"><img src="img/oper.png" style="width: 18px;"></span>
							</span>
						</span>
					</div>
					<div class="dvline">
						<hr class="line" />
					</div>-->
					
				</div>
			</div>
		</div>
		<br /><br />
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/arttmpl.js"></script>
	<script src="../../js/jquery-1.8.3.min.js"></script>
	<script>
	
		window.onload = function(){
			getTopicLst();
		}
	
		function getTopicLst(){
			var $topiclst = document.getElementById("containerlst");
			var $newsDiv = document.createElement("div");
			$newsDiv.innerHTML = template("topicTem", {"topiclst" : "123"});
			$topiclst.appendChild($newsDiv);
			
			//for (var i = 0; i < 5; i ++) {
			//	var $topicdiv = document.createElement("div");
			//	$topicdiv.innerHTML = createTopicHtml(null, i);
			//	$topiclst.appendChild($topicdiv);
			//}
		}
		
		function createTopicHtml($info, $num){
			var $topicHtml = 
			'<div id="topic" class="topic">'
			+	'<a href="topicinfo.html?topicid='+ $num +'"><span class="topic-title">让孩子赢在起跑线学区房热度不减</span>'
			+	'<span class="topic-description">'
			+		'从某种意义上说衍生品，学区房是房地产市场的衍生品，是现行教育体制下的独特现象。为了孩子能赢在起跑线上，能进好的学校，接收更好的教育，很多家长不惜重金买下重点办公小学的学区房。'
			+	'</span>'
			+	'<span class="topic-time">发布时间:2012-12-12</span>'
			+	'<span id="topicimg" class="topic-img">'
			+		'<span class="timg-left"><img src="../../img/1-13092PQ63K52.jpg" class="timg" /></span>'
			+		'<span class="timg-center"><img src="../../img/1-13092PQ63K52.jpg" class="timg" /></span>'
			+		'<span class="timg-right"><img src="../../img/1-13092PQ63K52.jpg" class="timg" /></span>'
			+	'</span></a>'
			+	'<span class="topic-bottom">'
			+		'<span class="topic-auther">发帖人:苏小白</span>'
			+		'<span class="topic-oper">'
			+			'<div id="oper" class="hideoper" style="display: none;">'
			+				'<div class="oper">'
			+					'<span class="oper-left">'
			+						'<img src="img/operzan02.png" style="width: 13px;" />赞'
			+					'</span>'
			+					'<span class="oper-center">'
			+						'<img src="img/opersc_03.png" style="width: 14px;" />收藏'
			+					'</span>'
			+					'<span class="oper-bottom">'
			+						'<img src="img/operpl_03.png" style="width: 13px;" />评论'
			+					'</span>'
			+				'</div>'
			+			'</div>'
			+			'<span class="operimg"><img src="img/oper.png" style="width: 18px;"></span>'
			+		'</span>'
			+	'</span>'
			+'</div>'
			+'<div class="dvline">'
			+	'<hr class="line" />'
			+'</div>';
			return $topicHtml;
		}
		
		mui("#containerlst").on("tap", ".operimg", function(){
			var $ele = this.parentElement.firstElementChild;
			if($ele.style.display == "none"){
				$ele.style.display = "";
			} else {
				$ele.style.display = "none";
			} 
		});
		
		mui("#containerlst").on("tap", "a", function(){
			mui.openWindow({
				url : this.href
			});
		});
	
		//点赞
		mui("#containerlst").on("tap", ".oper-left", function(){
			mui.toast("点赞了");
		});
		
		//收藏
		mui("#containerlst").on("tap", ".oper-center", function(){
			mui.toast("收藏了");
		});
		
		//评论
		mui("#containerlst").on("tap", ".oper-bottom", function(){
			mui.toast("评论了");
		});
		
	</script>
</html>
